<template>
	<view>
		
		<view class="item col" v-for="item in 4">
			<view class="row-between-center">
				<view class="row">
					<view class="icon-bg row-center">
						<image src="/static/images/circle.png" class="icon"></image>
					</view>
					<view class="title">
						唐岛湾已形成名店圈<span class="num"> 8家 </span> 
					</view>
				</view>
				<image src="/static/images/location.png" class="location"></image>
				
			</view>
			<view class="row pic-bg">
				<view class="pic row-center" v-for="item in 5">
					<image src="/static/images/pic.png" class="pic-img"></image>
				</view>
			</view>
			<view class="row-end">
				<view class="btn row-center">
					取消展示
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background: #F2F3F8;
	}
</style>

<style lang="scss" scoped>
	
	.item{
		margin: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #FFF;
		background:  #FFF;
		
		.icon-bg{
			background-color: #3B60D3;
			border-radius: 50%;
			width: 44rpx;
			height: 44rpx;
		}
		.icon{
			width: 24rpx;
			height: 24rpx;
		}
		.title{
			margin-left: 20rpx;
			color:  #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 22px; /* 157.143% */
		}
		.num{
			color:  #3B60D3;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
		}
		.location{
			width: 48rpx;
			height: 48rpx;
		}
		.pic-bg{
			padding: 30rpx;
			margin-top: 30rpx;
			border-radius: 8rpx;
			background: linear-gradient(0deg, #FFF 0%, #FFF 100%), url(<path-to-image>), lightgray 50% / cover no-repeat, #FFF;
			box-shadow: 0px 4px 4px 0px rgba(47, 94, 138, 0.10) inset;
		}
		
		.pic-img{
			width: 70rpx;
			height: 70rpx;
		}
		.pic{
			margin-right: 20rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 2rpx solid #E6E6E6;
			background: #FFF;
		}
		.btn{
			margin-top: 30rpx;
			width: 192rpx;
			height: 64rpx;
			flex-shrink: 0;
			border-radius: 32rpx;
			background:#3B60D3;
			
			background:  rgba(106, 104, 118, 0.25);
			
			
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx; /* 166.667% */
			
		}
	}
	
	.input {
		margin-top: 20rpx;
		height: 60rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F6F7FB;
	}

	.search {
		color: #FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
		width: 88rpx;
		height: 48rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #3B60D3;
	}
	.search-bg{
		padding: 20rpx;
		border-radius: 0px 0px 6px 6px;
		background: #FFF;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
	}
</style>
